<template>
	<view>
		<view style="padding: 30rpx;">
			<!-- 上面的提醒 -->
			<view v-if="item"   class="u-padding-20 u-content-color " style="font-weight: bold;background-color: white;">
				<text>押金金额：{{item.deposit_pay_amont}}</text>
				<text style="margin: 0 10rpx;">/</text>
				<text>可用余额：{{item.active_blance_amont}}</text>

			</view>
			<!-- 表单 -->
			<view>
				<u-form :model="form" ref="uForm" label-width="auto">
					<u-form-item label="解冻金额" prop="deposit_back_amont"><u-input type="digit"
							v-model="form.deposit_back_amont" /></u-form-item>
					<u-form-item label="解冻类型" prop="back_type">
						<u-radio-group v-model="form.back_type" @change="radioGroupChange">
							<view style="display: grid;grid-template-columns: repeat(2,1fr);">
								<u-radio
									v-for="(item, index) in [{id:1,label:'车损押金',value:1},{id:2,label:'违章押金',value:2},{id:3,label:'通用押金',value:3},{id:4,label:'押金抵扣租金',value:4}]"
									:key="index" :name="item.value">
									{{item.label}}
								</u-radio>
							</view>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="退还方式" prop="deposit_back_type_name">
						<u-select v-model="showSelectChannel" @confirm="confirm" :list="[
																{id:1,label:'微信',value:1},
																{id:2,label:'支付宝',value:2},
																{id:3,label:'银行转账',value:3},
																{id:4,label:'刷卡',value:4},
																{id:5,label:'押金转支付',value:5},
																{id:6,label:'现金',value:6},
																{id:7,label:'转移',value:7}
															]"></u-select>
						<u-input v-model="form.deposit_back_type_name" :disabled="true" type="select"
							@click="showSelectChannel=true" />
					</u-form-item>
					<u-form-item label="解冻说明" prop="remark">
						<u-input v-model="form.remark" />
					</u-form-item>
					<u-form-item label="依据截图" >
						<u-upload ref="uUpload" :auto-upload="false" :show-progress="true"
							:form-data="{path:'/static/img/deposit_back_img/'}" :multiple="true">
						</u-upload>
					</u-form-item>
					<view style="width: 100%;">
						<u-button @click="submit" type="primary">确定解冻</u-button>
					</view>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	export default {
		data() {
			return {
				showSelectChannel: false,
				item: null,
				form: {
					deposit_back_amont: '',
					back_type: '',
					deposit_back_type: '',
					remark: '',
					deposit_back_img: ''

				},
				rules: {
					deposit_back_amont: [{
							required: true,
							message: '请输入解冻金额',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if (parseFloat(value).toFixed(2) > parseFloat(this.item.active_blance_amont).toFixed(2)||parseFloat(value).toFixed(2)==0.00) {
									callback(new Error('解冻金额不能大于押金余额'));
								}else if (parseFloat(value).toFixed(2)==0.00) {
									callback(new Error('解冻金额不能为0'));
								} else {
									callback();
								}
							},
							message: '解冻金额不能大于押金余额',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					deposit_back_type: [{
						required: true,
						message: '请选择解冻方式',
						trigger: ['blur', 'change']
					}],
					deposit_back_type_name: [{
						required: true,
						message: '请选择退还方式',
						trigger: ['blur', 'change']
					}],
					remark: [{
						required: true,
						message: '请输入说明',
						trigger: ['blur', 'change']
					}],
					back_type: [{
						type:'number',
						required: true,
						message: '请选择解冻类型',
						trigger: ['blur', 'change']
					}],
					
				}
			}
		},
		onLoad(options) {
			var that = this;
			if (options.item) {
				this.item = JSON.parse(decodeURIComponent(options.item));
				console.log(this.item);
			}
		},
		methods: {
			radioGroupChange(e){
				console.log(e);
			},
			confirm(e) {
				this.form.deposit_back_type = e[0].value;
				this.form.deposit_back_type_name = e[0].label;
			},
			submit() {
				var that=this;
				var list = this.$refs.uUpload.lists;
				if(list.length==0){
					that.$refs.uToast.show({
						title: '请上传凭证',
						type: "error"
					});
					return;
				}
				var dir = '/static/img/deposit_deduction_img/';
				var form = JSON.parse(JSON.stringify(this.form));
				this.$refs.uForm.validate(valid=>{
					console.log(valid);
				});
				
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						cos.uploadFiles(list, dir, (data) => {
							var deposit_back_img = data.files.map(item => item.options.Key);
							form.deposit_back_img = deposit_back_img.toString();
							form.deposit_pay_id = that.item.deposit_pay_id;
							that.$http.post('/depositBack/insert', form, (res) => {
								if (res.data.success) {
									that.$refs.uToast.show({
										title: '解冻成功',
										type: "success"
									});
									uni.$emit("getDepositPayList", that.data);
									uni.navigateBack();
								} else {
									that.$refs.myModal.show('请求失败', res.data.result.message);
								}
							});
						});
					} else {
						console.log('验证失败');
					}
					
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>